<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-04-28 20:27:07
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-04-29 18:03:04
 * @FilePath     : \\tms-obc-web\\src\\app\\routes\\datatable\\components\\dataindex\\dataindex.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="AdvanceDepositTitle" [bordered]="true" [total]="totalAdvanceDeposit?.totalAmount || '¥ 0.00万'"
      [footer]="AdvanceDepositFooter" contentHeight="46">
      <ng-template #AdvanceDepositTitle>
        <p class="mini_area_title">
          <span class="title">客户预存款总额</span>
          <span class="subtitle">完成率 <span class="percent">32.12%</span></span>
        </p>
      </ng-template>
      <ng-template #AdvanceDepositFooter>
        <g2-custom #AdvanceDeposit></g2-custom>
        <!-- <g2-mini-area line color="#cceafe" height="45" [data]="totalAdvanceDeposit?.list || []"
          (clickItem)="handleClick($event)">
        </g2-mini-area> -->
      </ng-template>
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="PerformanceVolumeTitle" [bordered]="true"
      [total]="totalPerformanceVolume?.totalAmount || '¥ 0.00万'" [footer]="PerformanceVolumeFooter" contentHeight="46">
      <ng-template #PerformanceVolumeTitle>
        <p class="mini_area_title">
          <span class="title">业绩量总额</span>
          <span class="subtitle">完成率 <span class="percent">32.12%</span></span>
        </p>
      </ng-template>
      <ng-template #PerformanceVolumeFooter>
        <g2-mini-area line color="#cceafe" height="45" [data]="totalPerformanceVolume?.list || []"
          (clickItem)="handleClick($event)">
        </g2-mini-area>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="FreightTitle" [bordered]="true" [total]="totalFreight?.totalAmount || '¥ 0.00万'"
      [footer]="Freightfooter" contentHeight="46">
      <ng-template #FreightTitle>
        <p class="mini_area_title">
          <span class="title">司机应付总额</span>
        </p>
      </ng-template>
      <ng-template #Freightfooter>
        <g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalFreight?.list || []"
          (clickItem)="handleClick($event)">
        </g2-mini-area>
      </ng-template>
    </g2-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="6">
    <g2-card [title]="SurchargeTitle" [bordered]="true" [total]="totalSurcharge?.totalAmount || '¥ 0.00万'"
      [footer]="SurchargeFooter" contentHeight="46">
      <ng-template #SurchargeTitle>
        <p class="mini_area_title">
          <span class="title">附加费总额</span>
        </p>
      </ng-template>
      <ng-template #SurchargeFooter>
        <g2-mini-area line borderColor="#E60012" color="#F09896" height="45" [data]="totalSurcharge?.list || []"
          (clickItem)="handleClick($event)">
        </g2-mini-area>
      </ng-template>
    </g2-card>
  </div>
</div>
<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <nz-card acl [acl-ability]="['dataindex-getBillTypeProportion']"><label class="chart_title">订单类型比例</label>
      <g2-custom #g2custom delay="100"></g2-custom>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <nz-card acl [acl-ability]="['dataindex-getBillAmount']"><label class="chart_title">大区业绩完成情况</label>
      <!-- <g2-timeline [data]="chartData" [titleMap]="{ y1: '订单金额（元）', y2: '' }" [height]="200" mask="MM月DD日"
        [slider]="false"></g2-timeline> -->
      <g2-custom #RegionalPerforman delay="100"></g2-custom>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="16">
  <div nz-col class="gutter-row" [nzSpan]="6">
    <nz-card acl [acl-ability]="['dataindex-getWayBillDirectProportion']"> <label class="chart_title">运单直付比例</label>
      <!-- <g2-pie #pie title="销售额" subTitle="销售额" [total]="total" [valueFormat]="format" [data]="salesPieData" height="294"
        (clickItem)="handleClick($event)" [lineWidth]="10">
      </g2-pie> -->
      <g2-custom #BillDirectProportion delay="100"></g2-custom>
    </nz-card>
  </div>
  <div nz-col class="gutter-row" [nzSpan]="18">
    <nz-card acl [acl-ability]="['dataindex-getBillPaymentAmount']">
      <label class="chart_title">业绩完成情况</label>
      <!-- <g2-bar  [data]="salesData" (clickItem)="handleClick($event)" height="400"></g2-bar> -->
      <g2-custom #SaleProportion delay="100"></g2-custom>

    </nz-card>
  </div>
</div>
